<template>
  <div>
    <!-- 导航 -->
    <div class="left">
      <ul>
        <li v-for="(news, index) in newsList" :key="index">
          <!-- <router-link to="/newslist/detail?id=1&title=abc&content=aaaaa">{{
            news.title
          }}</router-link> -->

          <!--路由传参方式1  query 传参数
          <router-link
            :to="`/newslist/detail?id=${news.id}&title=${news.title}&content=${news.content}`"
            >{{ news.title }}</router-link
          > -->
          <!-- <router-link :to="{ name: 'wang' }">{{ news.title }}</router-link> -->

          <!-- 路由的传参方式2 params   user/list/1 Rest风格-->
          <!-- <router-link :to="`/newslist/detail/${news.id}/${news.title}/${news.content}`">{{
            news.title
          }}</router-link> -->

          <button @click="show(news)">查看详情</button>
          <router-link
            :to="{
              path: '/newslist/detail',
              query: {
                id: news.id,
                title: news.title,
                content: news.content
              }
            }"
          >
            {{ news.title }}
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 数据展示 -->
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterView, RouterLink, useRouter } from 'vue-router'

const newsList = [
  {
    id: '1001',
    title: 'xxx同东帝汶总统xxx会谈',
    content: '7月29日上午，国家主席xxx在北京人民大会堂同来华进行国事访问的东帝汶总统xxx举行会谈。'
  },
  {
    id: '1002',
    title: '第4金!练俊杰杨昊男双十米台金牌',
    content:
      '北京时间7月29日，在法国沙托鲁举行的巴黎奥运会男子双人10米跳台跳水决赛中，中国选手练俊杰/杨昊获得冠军'
  },
  {
    id: '1003',
    title: '中国代表团奋力拼搏 闪耀巴黎',
    content:
      '表现亮眼！巴黎奥运会上，中国代表团奋力拼搏，闪耀巴黎。中国在东京奥运会奖牌榜上位居第二，此次巴黎奥运会有望斩获更多金牌！'
  }
]

const router = useRouter()
const show = (news) => {
  console.log('detail')
  //router.push('/newslist/detail/1/2/3')
  router.push({
    path: '/newslist/detail',
    query: {
      id: news.id,
      title: news.title,
      content: news.content
    }
  })
}
</script>

<style scoped>
.left {
  width: 400px;
  height: 600px;
  border: 1px solid blue;
  float: left;
  line-height: 50px;
}
a {
  text-decoration: none;
  color: black;
}
.right {
  width: 100%;
  height: 600px;
  border: 1px solid red;
}
.active {
  background-color: powderblue;
}
</style>